<template>
  <view class="page">

    <view class="text_icon">
      <text class="text">新闻资讯</text>
      <uni-icons type="checkbox" size="30" color="#ffc20b"></uni-icons>
    </view>
    <view class="content">
      <view class="uni-list">
        <view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item, index) in news" :key="index" @tap="openNews" :data-newid="item.post_id">
          <view class="uni-media-list">
            <image class="uni-media-list-logo" :src="item.cover"></image>
            <view class="uni-media-list-body">
              <view class="uni-media-list-text-top">{{ item.title }}</view>
              <view class="uni-media-list-text-bottom uni-ellipsis">{{ item.created_at }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      news: [], // 存储新闻数据
    };
  },
  onLoad() {
    // 获取新闻内容
    uni.request({
      url: 'https://unidemo.dcloud.net.cn/api/news',
      method: 'GET',
      data: {},
      success: res => {
        this.news = res.data;
      },
    });
  },
  methods: {
    openNews(e) {
      var newsid = e.currentTarget.dataset.newid;
      uni.navigateTo({
        url: '../News/News?newid=' + newsid,
        success: res => {
          console.log("这条新闻的id为" + newsid);
        },
        fail: () => {
          console.log("fail");
        },
        complete: () => {}
      });
    }
  }
}
</script>

<style scoped>
.page {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  background-color: #f8f8f8;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  min-height: calc(100vh - 40px);
}
.text {
  color: #b07500;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.text_icon {
  display: flex;
  flex-direction: row;
}
.uni-media-list-logo {
  width: 100px;
  height: 100px;
  object-fit: cover;
}
.uni-media-list-text-top {
  max-width: 300px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>